<template>
	<u-popup 
		:show="show" 
		position="bottom" 
		:round="round"
		:closeable="closeable"
		@close="$emit('close', false)"
		:customStyle="{
			height: 'auto'
		}"
	>
		<view class="popup" :style="[
	            {
	                height: height,
	                backgroundColor: bgColor,
	            }, 
	            styles.style
	        ]">
			<view class="popup__header" :class="{ 'align-left': align === 'left' }" :style="styles.header" v-if="title">
				<slot name="icon"></slot>
				<text>{{ title }}</text>
			</view>
			<scroll-view scroll-y class="popup__scroll" :style="[{
	                height: scrollHeight,
	            }, styles.scroll]">
				<slot name="default"></slot>
			</scroll-view>
			<view class="popup__confirm" v-if="btnText" :style="styles.confirm">
				<view class="popup__confirm--btn" @click="$emit('click', $event)">{{ btnText }}</view>
			</view>
		</view>
	</u-popup>
	
</template>

<script>
import { formatStyle } from "@/utils"
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ""
		},
		btnText: {
			type: String,
			default: ""
		},
		bgColor: {
			type: String,
			default: "#fff"
		},
		height: {
			type: String,
			default: "75vh"
		},
		align: {
			type: String,
			default: "center"
		},
		// 自定义样式
		customStyle: {
			type: Object,
			default: () => {}
		},
		closeable: {
			type: Boolean,
			default: true
		},
		round: {
			type: Number,
			default: 10
		}
	},
	computed: {
		scrollHeight(){
			let titleHeight = this.title ? "90rpx" : "0px",
				footerHeight = this.btnText ? "150rpx" : "0px";
			return `calc(100% - ${titleHeight} - ${footerHeight})`
		},
		styles(){
			return formatStyle(this.customStyle)
		}
	},
	methods: {
		close(){},
		open(){},
	}
}
</script>

<style scoped lang="scss">
	
.popup {
	/deep/.u-popup__content{
		overflow: hidden;
	}
	&__header {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		color: #0E0E0E;
		font-weight: bold;
		border-bottom: 1rpx solid #f5f5f5;
		background:#fff;
		font-size: 32rpx;
		&.align-left {
			justify-content: flex-start;
			padding-left: 30rpx;
			box-sizing: border-box;
		}
	}

	&__scroll {
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	&__confirm {
		height: 150rpx;
		padding: 30rpx 20rpx 0;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.5);

		&--btn {
			width: 100%;
			background: var(--theme-color);
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 100rpx;
		}
	}
}
</style>